<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<title>四季之旅</title>
		<style type="text/css">
			#main{
				position: relative;
				overflow: hidden;
			}
			.wrap{
				width: 1600px;
				height: 100%;
			}
		
			.container1{	
				float: left;
				width: 800px;
				height: 100%;
				background-repeat: no-repeat;
				background-size: 100% 100%;						
				background-image: url(img/春.jpg);
			}
			.container2{
				float: left;
				width: 800px;
				height: 100%;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url(img/夏.jpg);
			}
			.container3{
				float: left;
				width: 800px;
				height: 100%;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url(img/秋.jpg);
			}
			.container4{
				float: left;
				width: 800px;
				height: 100%;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url(img/冬.jpg);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/inner.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--启动页-->
		<div class="start">
			<div class="fontclick">点击开启</div>
			<div class="outclick"></div>
			<div class="innerclick"></div>
		</div>
		<!--内页-->
		<div class="swiper-container content">
			<div id="bimain" class="swiper-wrapper">
				<div id="main" class="swiper-slide">
					<p style="color: #48A036;">春</p>
					<div class="wrap">
						<div class="container1"></div>
						<div class="container1"></div>
					</div>
				</div>
				<div id="main" class="swiper-slide">
					<p style="color: #E83934;">夏</p>
					<div class="wrap">
						<div class="container2"></div>
						<div class="container2"></div>
					</div>
				</div>
				<div id="main" class="swiper-slide">
					<p style="color: #F07E05">秋</p>
					<div class="wrap">
						<div class="container3"></div>
						<div class="container3"></div>
					</div>
				</div>
				<div id="main" class="swiper-slide">
					<p style="color: #1795E8;">冬</p>
					<div class="wrap">
						<div class="container4"></div>
						<div class="container4"></div>
					</div>
				</div>
			</div>
			<button id="bikestop" onclick="ostop()">stop</button>
			<button id="bikestart" onclick="onext()">start</button>
			<canvas id="bike"></canvas>
		</div>
		<!--箭头-->
		<div class="jiantou"> << </div>
		<div class="jttip"> 向左滑动 </div>
		<!--bgmusic-->
		<audio id="bgmusic" autoplay="autoplay">
  			<source src="music/Inner Warmth.mp3" type="audio/mp3">
		</audio>
		<!--music control-->
		<div class="mcwing"></div>
		<img id="musiccon" src="img/音乐包(1).png" />
		<script> 
			var mySwiper = new Swiper('.swiper-container', { 
    			loop: true,
    			width: 800,
    			spaceBetween : 3,
			});
		</script>
	</body>
</html>
